<template>
    <div>
        <Header></Header>
        <div style="text-align: center">
        <el-avatar  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <label style="font-style: oblique;color: dodgerblue;font-size: xx-large">liuyu</label>
            <el-tooltip class="item"  effect="light" content="关注" placement="top-start">
        <el-button style="margin-left: 100px;" size="small"  v-if="this.followed===false&&this.user.id !== 1" type="danger" icon="el-icon-plus" circle @click="follow"></el-button>
        <el-button style="margin-left: 100px;" size="small" v-if="this.followed===true&&this.user.id !== 1" type="danger" icon="el-icon-check"  circle @click="dialogVisible=true"></el-button>
            </el-tooltip>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="20%"
                :before-close="handleClose">
            <span>你确定要取消关注吗？</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="cancelFollow">确 定</el-button>
  </span>
        </el-dialog>
        </div>
        <el-row v-if="this.user.id === 1" :gutter="24" style="text-align: center;background-color: black;color: white">
            <el-col :span="6"><div class="grid-content bg-purple"><i class="el-icon-view"></i>  被访问量  &nbsp; &nbsp;12</div></el-col>
            <el-col  :span="6"><div class="grid-content bg-purple"><i class="el-icon-edit"></i><i><el-link  :underline="false" @click="publish" style="font-size: medium;color: white"> 发表博客  &nbsp; &nbsp;{{this.blogCount}}</el-link></i></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"><i class="el-icon-star-off"></i>  粉丝数量  &nbsp; &nbsp;{{this.follower}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"><i class="el-icon-chat-round"></i> <i ><el-link :underline="false" @click="showRemarkTable" style="font-size: medium;color: white"> 待审核评论  &nbsp; &nbsp; {{this.remarkCount}} </el-link></i>  </div></el-col>
        </el-row>
        <el-row v-if="this.user.id === 1" :gutter="22" style="text-align: center;background-color: black;color: white">
                 </el-row>
   <!--待评论表格-->
        <el-dialog
                empty-text="暂无评论"
                title="提示"
                :visible.sync="this.remarkDialogVisible"
                max-width="100%"
                :before-close="handleClose">
            <span slot="footer" class="dialog-footer">
  </span>

        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                type="index">
                    <template scope="scope">
                    <span><span v-text="getIndex(scope.$index)"></span></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="文章名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="评论内容">
                </el-table-column>
                <el-table-column
                        prop="created"
                        label="评论时间">
                </el-table-column>
                <el-table-column
                        label="审核状态">
                    <template scope="scope">
                        <i v-if="scope.row.status === 1" style="font-size: xx-large;color: green"  class="el-icon-circle-check"></i>
                        <i v-if="scope.row.status === 0" style="font-size: xx-large;color: red" class="el-icon-circle-close"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        width="150"
                        label="操作" >
                    <template scope="scope">
                    <el-button type="success"  size="mini" @click="scope.row.status=1,passRemark(scope.row.status,scope.row.id)">通过</el-button>
                    <el-button  type="danger" size="mini" @click="scope.row.status=0,failRemark(scope.row.status,scope.row.id)">失败</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
            <el-pagination class="mpage"
                           background
                           layout="prev, pager, next"
                           :current-page="remarkCurrentPage"
                           :page-size="remarkPageSize"
                           :total="remarkTotal"
                           @current-change=remarkPage
            />
        </el-dialog>
        <!--<div v-if="this.user.id === 1" style="margin-left: 400px;margin-top: 50px;background-color: darkgrey;margin-right: 400px">-->
            <!--<label style="margin-left: 200px;font-style: revert;font-weight: bold">12</label>-->
            <!--<label style="margin-left: 200px;font-style: revert;font-weight: bold"></label>-->
            <!--<label style="margin-left: 200px;font-style: revert;font-weight: bold"></label>-->
            <!--<label style="margin-left: 200px;font-style: revert;font-weight: bold">12</label>-->
            <!--&lt;!&ndash;<label style="color: black;text-align: center"><p>12</p></label>&ndash;&gt;-->
            <!--&lt;!&ndash;<label style="color: black;text-align: center"><p>12</p></label>&ndash;&gt;-->
            <!--&lt;!&ndash;<label style="color: black;text-align: center"><p>12</p></label>&ndash;&gt;-->
            <!--&lt;!&ndash;<label style="color: black;text-align: center"><p>12</p></label>&ndash;&gt;-->
        <!--</div>-->
        <!--<div v-if="this.user.id === 1" style="margin-left: 400px;background-color: darkgrey;margin-right: 400px">-->
            <!--<label style="margin-left: 184px;font-size: small">被访问量</label>-->
            <!--<label style="margin-left: 165px;font-size: small">发表文章</label>-->
            <!--<label style="margin-left: 170px;font-size: small">粉丝数量</label>-->
            <!--<label  style="margin-left: 168px;font-size: small">待审核评论<i class="el-icon-chat-round"></i></label>-->
        <!--</div>-->

        <el-container style="max-height: 100%;margin-top: 20px">
            <el-aside width="20%">
                <el-card>
                    <label>  <i v-if="haslogin === true"><i class="el-icon-s-custom"></i>创建时间：{{user.created}}</i></label>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <label style=""><i></i><i>获得成就</i></label>
                    <br>
                    <br>
                    <label style="color: red"><i class="el-icon-s-flag"></i>&nbsp;&nbsp;&nbsp;<i>获得&nbsp;{{this.like}}&nbsp;次点赞</i></label>
                    <br>
                    <label style="color: dodgerblue"><i class="el-icon-s-flag"></i>&nbsp;&nbsp;&nbsp;<i>获得&nbsp;{{this.tRemarkCount}}&nbsp;个评论</i></label>
                    <br>
                    <label style="color: orange"><i class="el-icon-s-flag"></i>&nbsp;&nbsp;&nbsp;<i>获得&nbsp;{{this.collect}}&nbsp;个收藏</i></label>
                    <br>
                    <br>
                    <label style=""><i></i><i>荣誉勋章</i></label>
            </el-card>

                <!--flagcounter-->
                <a href="https://info.flagcounter.com/PPaq"><img src="https://s11.flagcounter.com/count2/PPaq/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
            </el-aside>
            <el-main width="80%" style="">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="文章" name="first">
                        <div class="block" >
                                    <el-card style="margin-top: 10px" v-for="blog in blogs">
                                        <router-link :to="{name:'BlogDetail',params:{blogId:blog.id}}">
                                            <h4 style="color: black;font-style: oblique;font-size: large">{{blog.title}}</h4>
                                        </router-link>
                                        <p>{{blog.description}}</p>
                                        <p style="font-style: italic;font-size: small;float: right">发表时间：{{blog.created}}</p>
                                        <div v-if="user.id === 1">
                                        <el-tooltip class="item"  effect="light" content="编辑" placement="top-start">
                                        <i style="color: orange;font-size: xx-large" class="el-icon-edit" @click="toEdit(blog.id)" >
                                        </i>
                                        </el-tooltip>
                                        <el-tooltip class="item"  effect="light" content="删除" placement="top-start">
                                        <i  style="margin-left: 50px;color: red;font-size: xx-large"  class="el-icon-delete" @click="toDelete(blog.id)" >
                                        </i>
                                        </el-tooltip>
                                        </div>
                                    </el-card>
                            <el-pagination class="mpage"
                                           background
                                           layout="prev, pager, next"
                                           :current-page="currentPage"
                                           :page-size="pageSize"
                                           :total="total"
                                           @current-change=page
                            >
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="资源" name="second">
                        <el-upload
                                v-if="user.id===1"
                                class="upload-demo"
                                ref="upload"
                                action="http://localhost:8080/api/file/upload"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选 取 文 件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">一次只能上传一个文件，上传文件不超过200M</div>
                        </el-upload>
                        <el-card>
                            <h>文件列表</h>
                            <el-table
                                    empty-text="暂无文件"
                                    :before-close="handleClose"
                                    :data="fileListData"
                                    style="width: 100%">
                                <el-table-column
                                        prop="fileName"
                                        label="文件名"
                                        width="400">
                                </el-table-column>
                                <el-table-column
                                        prop="description"
                                        label="文件描述"
                                        width="400 ">
                                </el-table-column>
                                <el-table-column
                                        prop="created"
                                        label="上传时间"
                                        width="400 ">
                                </el-table-column>
                                <el-table-column
                                        label="下载">
                                    <template scope="scope">
                                        <el-button type="text" @click="toDownload(scope.row.url)">下载</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        v-if="user.id ===1"
                                        label="操作"
                                        width="150">
                                    <template scope="scope">
                                    <el-button  size="mini" type="primary" @click="toEditFile(scope.row.id,scope.row.fileName,scope.row.description)">编辑</el-button>
                                    <el-button  size="mini" type="danger" @click="toDeleteFile(scope.row.id)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                        <el-dialog
                                title="提示"
                                :visible.sync="filedialogVisible"
                                width="30%">
                            <span slot="footer" class="dialog-footer"/>
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="文件名称" prop="fileName">
                                    <el-input v-model="ruleForm.fileName"></el-input>
                                </el-form-item>
                                <el-form-item label="描述" prop="description">
                                    <el-input v-model="ruleForm.description"></el-input>
                                </el-form-item>
                            </el-form>
    <el-button @click="filedialogVisible = false">取 消</el-button>
    <el-button type="primary"  @click="submitForm('ruleForm')">确 定</el-button>
                        </el-dialog>
                       <br>1、文件上传<br>2、资源下载<br>3、下载收费</el-tab-pane>
                    <el-tab-pane label="问答" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="收藏" name="fourth">定时任务补偿</el-tab-pane>
                    <el-tab-pane label="关注/订阅" name="fourth">定时任务补偿</el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import Header from "../components/Header";
    export default {
        name: "Main",
        components: {Header},
        data() {
            return {
                user: {
                    created: "",
                    id: "",
                },
                blogs: [],
                currentPage: 1,  //当前页
                total: 0,    //总共多少页
                pageSize: 5, //每一页的数据个数
                remarkCurrentPage: 1,  //当前页
                remarkTotal: 0,    //总共多少页
                remarkPageSize: 5, //每一页的数据个数
                haslogin: false,
                blogCount: 999,
                activeName: "first",
                like: 999, //点赞数
                collect: 999,//收藏数
                follower: 999,//关注数
                remarkCount: 999,//待审核评论数
                tRemarkCount: 999,//获得评论数
                followed: false,
                dialogVisible: false,
                remarkDialogVisible: false,
                tableData:[],//待评论表格数据,
                allData:[],
                allBlogData:[],
                fileList:[],//上传文件列表
                fileListData:[],//服务器文件列表
                textarea:'',//文件描述
                filedialogVisible: false,
                ruleForm:{
                    id:'',
                    fileName:'',
                    description:'',
                },
                rules: {
                    fileName: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                },
            }
        },
        methods: {
            //表单提交
            submitForm(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post("/file/update",this.ruleForm).then(res=>{
                            console.log("表单提交")
                            console.log(res.data.data)
                            if(res.data.data>0){
                                this.$message.success("编辑成功")
                                //获取用户上传文件列表
                                this.$axios.post("/file/getFileUploadList").then(res =>{
                                    console.log("文件列表")
                                    console.log(res.data.data)
                                    this.fileListData = res.data.data
                                })
                            }else{
                                this.$message.error("编辑失败")
                            }
                        })
                        this.filedialogVisible = false

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //文件编辑
            toEditFile(id,fileName,description){
                this.filedialogVisible = true;
                this.ruleForm.id = id
                this.ruleForm.fileName=fileName
                this.ruleForm.description=description
            },
            //文件删除
            toDeleteFile(id){
                this.$confirm('确认关闭？')
                    .then(_ => {
                       this.$axios.post("/file/delete?id="+id).then(res =>{
                           console.log("文件删除")
                           console.log(res.data.data)
                           if(res.data.data>0){
                               this.$message.success("删除成功")
                               //获取用户上传文件列表
                               this.$axios.post("/file/getFileUploadList").then(res =>{
                                   console.log("文件列表")
                                   console.log(res.data.data)
                                   this.fileListData = res.data.data
                               })
                           }else{
                               this.$message.error("删除失败")
                           }
                       })
                    })
                    .catch(_ => {});
            },
            //文件下载
            toDownload(url){
              window.open(url)
            },
            //编辑按钮事件
            toEdit(id){
                      //window.open(url,"_blank");
                     //_blank : 在新窗口打开
                     //_self : 在当前窗口打开
                window.open("/blog/"+id+"/edit")
                // const _this = this
                // _this.$router.push({ name: 'BlogEdit', params: { blogId: id }})
            },
            toDelete(id){
                this.$confirm('确认删除？')
                    .then(_ => {
                        this.$axios.post("/blog/delete?id=" + id).then(res => {
                            console.log("删除状态")
                            console.log(res.data.data)
                            if (res.data.data) {
                                this.$message.success("删除成功")
                                //查询所有博客
                                this.$axios.post("/blogs").then(res => {
                                    console.log("所有博客")
                                    console.log(res.data.data)
                                    this.allBlogData = res.data.data
                                    this.total = this.allBlogData.length
                                    this.blogs = this.allBlogData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
                                    console.log(this.blogs)

                                })
                            } else {
                                this.$message.error("删除失败")
                            }
                        })
                    })
            },
            //获取索引
            getIndex($index){
                        return (this.remarkCurrentPage-1)*this.remarkPageSize + $index + 1;
            },
            //通过评论
            passRemark(remarkStatus,remarkId){
                console.log("remarkStatus,remarkId"+remarkStatus,remarkId)
               this.$axios.post("/remark/status?id="+remarkId+"&status="+remarkStatus).then(res =>{
                   console.log("评论状态")
                   console.log(res.data.data)
                   if(res.data.data){
                       this.$message.success("更新成功!")
                   }
               })
            },
            //失败评论
            failRemark(remarkStatus,remarkId){
                console.log("remarkStatus,remarkId"+remarkStatus,remarkId)
                this.$axios.post("/remark/status?Id="+remarkId+"&status="+remarkStatus).then(res =>{
                    console.log("评论状态")
                    console.log(res.data.data)
                    if(res.data.data){
                        this.$message.success("更新成功!")
                    }
                })
            },
            handleClose(){
                this.remarkDialogVisible = false
                //评论数
                this.$axios.post("/remark/getFailRemarkCount",{
                    headers: {
                        "authorization": localStorage.getItem("token")
                    }
                }).then(res =>{
                    console.log("待审核评论数")
                    console.log(res.data.data)
                    this.remarkCount = res.data.data.failRemarkCount
                    this.tRemarkCount = res.data.data.totalRemarkCount
                })

            },
            //显示评论表格
            showRemarkTable(){
              this.remarkDialogVisible = true
                this.$axios.post("/remark/getUserRemarkList").then(res =>{
                    console.log("评论表格数据")
                    console.log(res.data.data)
                    this.allData = res.data.data
                    this.tableData=this.allData.slice((this.remarkCurrentPage-1)*this.remarkPageSize,this.remarkCurrentPage*this.remarkPageSize)
                    this.remarkTotal = this.allData.length
                    console.log(this.tableData)
                    console.log(this.remarkTotal)
                })

            },
            //发表文章
            publish(){
                const _this=this
                _this.$router.push("/blog/add")
            },
            //关注
            follow(){
                this.followed=true
                this.$axios.post("/following?userId="+this.user.id).then(res =>{
                    console.log("关注，关注数")
                    console.log(res.data.data)
                })

                //关注数
                this.$axios.post("/follow",{
                    headers: {
                        "authorization": localStorage.getItem("token")
                    }
                }).then(res =>{
                    console.log("关注数")
                    console.log(res.data.data)
                    this.follower = res.data.data
                })
            },
            cancelFollow(){
                this.followed=false
                this.dialogVisible= false
                this.$axios.post("/takeOff?userId="+this.user.id).then(res =>{
                    console.log("取消关注，关注数")
                    console.log(res.data.data)
                })
                //关注数
                this.$axios.post("/follow",{
                    headers: {
                        "authorization": localStorage.getItem("token")
                    }
                }).then(res =>{
                    console.log("关注数")
                    console.log(res.data.data)
                    this.follower = res.data.data
                })
            },
            handleClick(tab,event){
                console.log(tab,event)
            },
            //请求指定页的方法
            page(currentPage) {
                this.currentPage = currentPage
                this.blogs = this.allBlogData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
                console.log(this.blogs)
            },
            //评论表格分页方法
            remarkPage(currentPage) {
                this.remarkCurrentPage = currentPage
                this.tableData=this.allData.slice((this.remarkCurrentPage-1)*this.remarkPageSize,this.remarkCurrentPage*this.remarkPageSize)
                this.remarkTotal = this.allData.length
                console.log(this.remarkCurrentPage)
                console.log(this.tableData)
            },
            //上传文件
            //************
            submitUpload() {
                 this.$refs.upload.submit();
                 this.sleep(300)
            },

            sleep(ms){
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                        //获取用户上传文件列表
                        this.$axios.post("/file/getFileUploadList").then(res =>{
                            console.log("文件列表")
                            console.log(res.data.data)
                            this.fileListData = res.data.data
                        })
                    }, ms)
                })
            },
                handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        },
        created() {

            //查询所有博客
            this.$axios.post("/blogs").then(res =>{
                console.log("所有博客")
                console.log(res.data.data)
                this.allBlogData = res.data.data
                this.total = this.allBlogData.length
                this.blogs = this.allBlogData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
                console.log(this.blogs)

            })
            //如果用户名存在，就回显出来
            if (this.$store.getters.getUser.username !== null) {
                this.user.created = this.$store.getters.getUser.created
                this.user.id = this.$store.getters.getUser.id
                console.log("id============"+this.user.id )
                this.haslogin = true
            }else {
                this.$router.push("/")
            }


            this.$axios.post("/blog/BlogCount?userId=" + 1, {
                headers: {
                    "authorization": localStorage.getItem("token")
                }
            }).then(res => {
                console.log(res)
                this.blogCount = res.data.data
            })

            //点赞数、收藏数
            this.$axios.post("/blog/userLikeCount?userId=" + 1, {
                headers: {
                    "authorization": localStorage.getItem("token")
                }
            }).then(res => {
                console.log("点赞数")
                console.log(res.data.data)
              this.like = res.data.data.countLike
                this.collect = res.data.data.countCollect
            })
            //关注数
            this.$axios.post("/follow",{
                headers: {
                    "authorization": localStorage.getItem("token")
                }
            }).then(res =>{
                console.log("关注数")
                console.log(res.data.data)
                this.follower = res.data.data
            })
            //评论数
            this.$axios.post("/remark/getFailRemarkCount",{
                headers: {
                    "authorization": localStorage.getItem("token")
                }
            }).then(res =>{
                console.log("待审核评论数")
                console.log(res.data.data)
                this.remarkCount = res.data.data.failRemarkCount
                this.tRemarkCount = res.data.data.totalRemarkCount
            })

            //获取用户关注状态,传入一个不存在的blogId
            this.$axios.post("/blog/islike?userId="+this.user.id+"&blogId=1999999999").then(res =>{
                console.log("关注状态")
                console.log(res.data.data)
                this.followed = res.data.data.followed
            })

            //获取用户上传文件列表
            this.$axios.post("/file/getFileUploadList").then(res =>{
                console.log("文件列表")
                console.log(res.data.data)
                this.fileListData = res.data.data
            })
        }
    }
</script>

<style scoped>

</style>